<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气</title>
    <style>
        #show {
            display: flex;
            flex-wrap: wrap;
        }

        #city {
            border: 1px solid black;
        }

        #details {
            border: 1px solid black;
        }
        #ul{
            list-style: none;
        }
        #li:hover{
            cursor: pointer;
            background: rgb(66, 64, 64);
            /* width: 100px; */
        }
        #manyCity{
            display: none;
            width: 174px;
            border: 1px solid #ccc;
            position: absolute;
            left: 120px;
            top: 29px;
            background-color: #ccc;
        }
    </style>
    <script src="jquery1.9/jquery-1.9.0.min.js"></script>
    <script>
        function loadData() {
            var cityId = $("#cityId").val();
            var cityName = $("#cityName").val();
            let scriptTag = document.createElement("script");
            scriptTag.src = "http://toy1.weather.com.cn/search?callback=showId&cityname=" + cityName;
            // scriptTag.src="https://query.asilu.com/weather/weather/?callback=showInfo&id="+cityId+"&address=&_=1610002093405";
            // 如果不把 script 标签加入 页面, 是不会发送请求获取数据的
            document.querySelector("head").appendChild(scriptTag);
            console.log(scriptTag);
            // 用完删除对应的 script 标签
            scriptTag.remove();
        }

        function showId(data) {//可以拿到城市编号
            if (!$("#cityName").val()) {
                $("#manyCity").css("display", "none");
            } else {
                $("#manyCity").css("display", "block");
                $("#ul").empty();
                console.log(data);
                console.log(data.length);
                for (let i = 0; i < data.length; i++) {
                    console.log(data[i].ref);
                    var loc = data[i].ref;
                    console.log("编号：" + parseInt(data[i].ref));
                    console.log(loc.split("~", 10));//将字符串转为数组
                    var arrCity = loc.split("~", 10)
                    var li = $(`<li id="li" class="${arrCity[0]}" onclick='doSelect(this)'>${arrCity[9]}-${arrCity[2]}</li>`);
                    $("#ul").append(li);
                }
            }
        }

        function doSelect(obj){
            console.log(obj);
            console.log(obj.getAttribute("class"));
            var cityid=obj.getAttribute("class");
            let scriptTag = document.createElement("script");
            scriptTag.src="https://query.asilu.com/weather/weather/?callback=showInfo&id="+cityid+"&address=&_=1610002093405";
            // 如果不把 script 标签加入 页面, 是不会发送请求获取数据的
            document.querySelector("head").appendChild(scriptTag);
            console.log(scriptTag);
            // 用完删除对应的 script 标签
            scriptTag.remove();
            $("#manyCity").css("display", "none");
        }


        function showInfo(data) {
            $("#show").empty();
            console.log(data);
            var city = $("<div id='city' ></div>")
            city.html(`
                <div>id:${data.id}</div>
                <div>城市:${data.city}</div>
                <div>更新时间:${data.update_time}</div>
                <div>当前日期:${data.date}</div>
            `);
            $("#show").append(city);
            for (let i = 0; i < data.list.length; i++) {
                var divs = $("<div id='details' style='width: 200px;height: 290px;'></div>")
                divs.html(`
                    <p>日期:${data.list[i].date}</p>
                    <p>天气:${data.list[i].weather}</p>
                    <p>气温:${data.list[i].temp}</p>
                    <p>风力:${data.list[i].w}</p>
                    <p>风向:${data.list[i].wind}</p>
                `);
                $("#show").append(divs);
            }
        }



    </script>
</head>

<body>
    请输入城市名：<input id="cityName" type="text" onkeyup="loadData()" ><input type="button" value="loadData" " />
    <div id="manyCity">
        <ul id="ul"></ul>
    </div>

    <div id="show">
        <!-- <div id="city" ></div> -->
        <!-- <div id="details" style="width: 250px;height: 250px;"></div> -->
    </div>
</body>

</html>